<template>
  <div class="page-content">
    <dovecote-info></dovecote-info>
    <!-- 表格头部 -->
    <table-bar :columns="columns" @changeColumn="changeColumn">
      <div slot="top" class="search">
        <el-row>
          <el-col :span="7">
            <el-input placeholder="输入id查询" v-model="searchValue" size="small" @change="setAllList">
            </el-input>
          </el-col>
        </el-row>
      </div>
      <div slot="top">
        <el-form label-width="4.375rem">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :lg="6">

            </el-col>

          </el-row>
        </el-form>
      </div>
      <div slot="bottom">
        <el-col :span="3">
          <el-button type="primary" plain size="mini" @click="addEven" v-show="dataList&&pageShow">新增订单</el-button>
        </el-col>
      </div>
      <!-- 切换按钮 -->
      <!-- <el-tooltip slot="button1" effect="dark" content="数据图表" placement="top-start">
        <el-button icon="el-icon-pie-chart" size="small" @click="cut()" />
      </el-tooltip> -->
      <!-- <el-button icon="el-icon-search" @click="isShowSearchWrap()" size="small" /> -->
      </el-tooltip>
    </table-bar>


    <!-- 图表 -->
    <div v-if="!dataList&&!pageShow">
      <el-row :gutter="10">

        <el-col :span="8">
          <el-card class="card box-card">
            <div slot="header" class="clearfix">
              <i class="el-icon-share" style="font-size:18px"></i>
              <span>种鸽入库</span>
            </div>
            <echart-pmouth></echart-pmouth>
          </el-card>
        </el-col>

        <el-col :span="15">
          <el-card class="card box-card">
            <echart-breeding></echart-breeding>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <!-- 图表区域 -->


    <!-- 主体表格区域开始 -->
    <TheTable :columns="columns" :layout="false" ref="tableRef" :data="allInfo.allList" :page.sync="page" :showPage="false" v-show="dataList&&pageShow">
      <el-table-column label="id" prop="id" v-if="columns[0].show" show-overflow-tooltip />
      <el-table-column label="类型" prop="type" v-if="columns[1].show" show-overflow-tooltip />
      <el-table-column label="经手人" prop="handler" v-if="columns[2].show" show-overflow-tooltip />
      <el-table-column label="数量" prop="amount" v-if="columns[3].show" show-overflow-tooltip />
      <el-table-column label="金额（总价）" prop="total" v-if="columns[4].show" show-overflow-tooltip />
      <el-table-column label="备注" prop="remark" v-if="columns[5].show" show-overflow-tooltip />
      <el-table-column label="创建时间" prop="gmtCreate" v-if="columns[6].show" show-overflow-tooltip />
      <el-table-column label="修改时间" prop="gmtModified" v-if="columns[7].show" show-overflow-tooltip />
      <!-- <el-table-column fixed="right" label="操作" width="200rem">
     <template slot-scope="scope">
       <el-button
         type="text"
         style="color: #32CD32"
         icon="el-icon-share"
         @click="seeDetail(scope.row.id)"
         >详情</el-button
       >
       <el-button type="text" icon="el-icon-edit"  @click="editForm(scope.row.id)">
         编辑
       </el-button>
       <el-button type="text" style="color: #FA6962" icon="el-icon-delete"  @click="tableDelete(scope.row.id)">
         删除
       </el-button>
     </template>
   </el-table-column> -->
      <!-- <el-table-column fixed="right" label="操作" width="200rem">
        <template slot-scope="scope">
          <el-button type="text" style="color: #32CD32" icon="el-icon-share">详情</el-button>
          <el-button type="text" style="color: #FA6962" icon="el-icon-delete" @click="tableDelete(scope.row.id)">
            删除
          </el-button>
        </template>
      </el-table-column> -->
    </TheTable>
    <!-- 表格区域结束 -->

    <div class="page-css" v-show="dataList&&pageShow">
      <el-pagination :page-sizes="[2, 5, 10, 15]" :page-size="page.pageSize" :current-page="page.pageNum" layout="total, sizes, prev, pager, next, jumper"
        :total="page.total" @current-change="handleCurrentChange" @size-change="handleSizeChange" v-if="true">
      </el-pagination>
    </div>


    <el-dialog title="详情" :visible.sync="dialogVisible1" width="30%" :before-close="closeAddDialog">
      <span>鸽棚id：A01</span>
      <br>
      <span>负责人:赖茂坤</span>
      <br>
      <span>备注：</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 添加订单区域开始 -->
    <OrderForm :addInfo="addInfo" :title="title" :dialogVisible="dialogVisible" @closeAddDialog="closeAddDialog" v-show="dialogVisible"
      @DisplayData="DisplayData" />
    <!-- 添加订单区域结束 -->
    <!-- 查看详情开始 -->
    <!-- 查看详情开始 -->
    <DetailedPopup :detailDialog="detailDialog" :detailInfo="detailInfo" :title="title" @closeAddDialog="closeAddDialog" v-show="detailDialog"
      @DisplayData="DisplayData" />
    <!-- 查看详情结束-->
    <!-- 查看详情结束-->
    <!-- <el-pagination
            :page-sizes="[1, 5, 10, 15]"
            :page-size="1"
            :current-page="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="100"
            class="page"
        >
    </el-pagination> -->
    <!-- 添加订单区域开始 -->

    <!-- 添加订单区域结束 -->

  </div>

</template>


<script>

  // import {storage} from "@/api/Dovecote/ProductionCount/ShipmentEntryBill";
  import echartBreeding from '../../../components/Dovecote/ProductionCount/echartBreeding.vue';
  import { mapState } from "vuex";
  import { getAllCage } from "@/api/common.js";
  import AbnormalFrom from "@/components/Dovecote/ProductionCount/AbnormalFrom";
  import StorageForm from "@/components/Dovecote/ProductionCount/StorageForm";
  import OrderForm from "@/components/Dovecote/ProductionCount/OrderForm";
  import DetailInfo from "@/components/Dovecote/ProductionCount/DetailInfo";
  import echartPmouth from '../../../components/Dovecote/ProductionCount/echartPmouth.vue';
  import {
    AddStorage
  } from "@/api/Dovecote/ProductionCount/Meat_Pigeon_Out.js";



  // import { storage } from "@/components/Dovecote/ProductionCount/ShipmentEntryBill.js";
  // import {
  //   getAllInfoByPage,
  //   getInfoByBatch,
  //   deleteOrder,
  //   getAllEntryBillByIdAndType,
  //   entryStorage
  // } from "@/api/Dovecote/ProductionCount/ShipmentOutBill.js";

  import echartStorage from '../../../components/Dovecote/ProductionCount/echartStorage.vue';
  import InPopup from "@/components/Dovecote/StoreManage/InPopup";
  import baseNav from "@/components/Dovecote/StoreManage/baseNav";
  import DetailedPopup from "@/components/Dovecote/StoreManage/DetailedPopup";
  // import OrderForm from "@/components/Dovecote/ProductionCount/OrderForm";
  import {
    getCageCount,
  } from "../../../api/Dovecote/InfoManage/AllHouse";
  import {
    getAllInfoByPage,
    deleteOrder,
    showEidtRequest,
    showOrder,
    EidtRequest,
    getByDateInfo,
  } from "@/api/Dovecote/StoreManage/Materialln.js";






  export default {
    name: "BreedingPigeonIn",
    meta: {
      title: "种鸽入库",
    },
    components: {
      StorageForm,
      echartStorage,
      OrderForm,
      DetailInfo,
      echartPmouth,
      echartBreeding,
      InPopup,
      baseNav,
      DetailedPopup,
    },
    data() {
      return {
        //搜索
        searchData: {
                    id: "",
                },
        layout: "search,refresh",
        searchValue: '',
        //表名
        title: "",
        //分类
        searchType: {
          baseId: "3",
          type: "种鸽",
        },
        // 定义页码的一些参数
        page: {
          current: 1,
          pageSize: 5,
          pageNum: 1,
          total: 4,
        },
        theType: {
          type: "种鸽",
        },
        allInfo: {
          // 主体表格数据
          allList: [],
        },

        //鸽笼总数
        cageTotal: 0,
        //分页编号
        cagePageNum: 1,
        //分页数据条数
        cagePageSize: 5,
        //分页是否显示
        pageShow: true,
        theBatch: {
          farmBatch: "",
          baseId: JSON.parse(window.sessionStorage.getItem("BaseInfo")).id,
          type: "种鸽",
        },
        //是否打开详情表单
        detailDialog: false,
        //详细信息
        detailInfo: {},
        editFrom: {},
        shuxin: false,
        // searchData: {
        //   date: "",
        // },
        searchValue: '',
        //列表的形式展示
        dataList: true,


        // 添加表单的数据
        addInfo: {
          shipmentEntryBillDto: {
            baseId: "3",
            handler: "",
            remark: "",
            type: "种鸽",
          },
          shipmentEntryBaseDtoList: [
            {
              amount: "",
              remark: "",
              supplierId: "",
              type: "种鸽",
              typeName: "",
              unitPrice: "",
            },
          ],
        },

        shipmentEntryBillDto: {
          baseId: "3",
          handler: "",
          remark: "",
          type: "种鸽",
          shipmentEntryBaseDtoList: [],
        },
        shipmentEntryBaseDtoList: [
          {
            amount: "",
            remark: "",
            supplierId: "",
            type: "种鸽",
            typeName: "",
            unitPrice: "",
          },
        ],



        // editFrom: {},

        // data: '',
        // addForm: {
        //   idd: ''
        // },
        // addFormRules: {
        //   idd: [
        //     {
        //       required: true,
        //       message: "请输入id",
        //       trigger: 'blur'
        //     }
        //   ]
        // },
        dialogVisible: false,
        dialogVisible1: false,
        // 获取到的详细信息
        detailInfo: {
          detailArray: []
        },
        //是否打开详情表单
        detailDialog: false,
        // 主体表格的表头数据
        columns: [
          { name: "id", show: false, prop: "id" },
          { name: "类型", show: true, prop: "type" },
          { name: "经手人", show: true, prop: "handler" },
          { name: "数量", show: true, prop: "amount" },
          { name: "金额（总价）", show: true, prop: "total" },
          { name: "备注", show: true, prop: "remark" },
          { name: "创建时间", show: true, prop: "gmtCreate" },
          { name: "修改时间", show: true, prop: "gmtModified" },
        ],
        options: [{
          value: '1',
          label: 'A01'
        }, {
          value: '2',
          label: 'A02'
        }],
        value: '',
        allList: [],


        //页码
        query: {
          baseId: '3',
          pageNum: 1,
          pageSize: 1,

        },
        pageNum: 1,
        pageSize: 1,

        //页码
        queryList: {
          baseId: JSON.parse(window.sessionStorage.getItem("BaseInfo")).id,
          type: '种鸽',
          pageNum: 1,
          pageSize: 1,


        },
        //鸽棚编号
        dovecoteList: [
          {
            id: 0,
            dovecoteNumber: "A01",
          },
          {
            id: 1,
            dovecoteNumber: "A02",
          },
          {
            id: 2,
            dovecoteNumber: "A03",
          },
        ],

// ------------查看详情数据---------
      // 通过id查询
        sendId: {
          shipmentEntryBill: ""
      },
      // 获取到的详细信息
        detailInfo: {
          detailArray: []
      },
      //是否打开详情表单
        detailDialog: false,

        // editFrom: {},
        // dateValue: "",
      };
    },



    created() {

      // this.init();
      // this.getStorageList();
      this.Data();
      // 获取订单详情的数据
      this.setAllList();

    },
    mounted() {
      let that = this;
      // that.initCharts();
    },
    methods: {
      Data() {
        // console.log("说了你不行吧");
        const w = {
          shipmentEntryBillDto: this.shipmentEntryBillDto,
          shipmentEntryBaseDtoList: this.shipmentEntryBaseDtoList
        }
        console.log(w)

      },

      changeColumn(columns) {
        this.columns = columns
        this.$refs.table.doLayout()
      },

      //打开新增表单
      addEven() {
        this.dialogVisible = true;
        this.title = "新增订单";
        this.addInfo = {
          shipmentEntryBillDto: {
            baseId: "3",
            handler: "",
            remark: "",
            type: "种鸽",
          },
          shipmentEntryBaseDtoList: [
            {
              amount: "",
              remark: "",
              supplierId: "",
              type: "种鸽",
              typeName: "",
              unitPrice: "",
            },
          ],
        };

      },

      //关闭表单
      closeAddDialog(a) {
        this.detailDialog = a
        this.dialogVisible = a;
        this.addInfo = {};
        this.setAllList();
      },
      DisplayData() {
        this.setAllList();
      },

      // //获取主体表格数据
      // async getStorageList() {
      //   // this.shuxin = false;
      //   // if (this.searchValue) {
      //   //   this.searchData.id = this.searchValue;
      //   //   console.log("success!")
      //   // } else if (this.searchValue == '') {
      //   //   this.searchData.id = this.searchValue;
      //   // }


      //   // console.log("搜索的日期是" + this.searchData.id)
      //   const { data: res } = await getAllInfoByPage(
      //   this.page.pageNum,
      //   this.page.pageSize,
      //   this.searchType,
      // );
      // console.log("请求到的列表", res);
      // if (res.statusCode !== 20000) {
      //   this.$message.error("查询数据失败");
      // } else {
      //   this.allInfo.allList = res.data.records;
      //   this.page.total = res.data.total;
      // }
      // },


      // async postStorageList() {
      //   const { data: res } = await AddStorage(
      //     this.addInfo
      //   );
      //   console.log("请求到的列表：", res);
      //   // if (res.statusCode !== 20000) {
      //   //     this.$message.error("查询数据失败");
      //   //   } else {
      //   //     let array = [];
      //   //     for (let key in res.data) {
      //   //       let obj = res.data[key];
      //   //       array.push(obj)
      //   //     }
      //   //     console.log(array);
      //   //     this.allList = array;
      //   //     console.log(this.allList[0][0].id)
      //   //   }
      // },
      // 根据id删除订单
      async tableDelete(id) {
        console.log(id)
        const confirmResult = await this.$confirm(
          "此操作将永久删除该订单, 是否继续?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        ).catch((err) => {
          return err;
        });
        if (confirmResult !== "confirm") {
          return this.$message.info("已取消删除");
        }
        const { data: res } = await deleteOrder(id);
        if (res.statusCode == 20000) {
          this.$message.success("已成功删除该订单");
          this.setAllList();
        } else {
          this.$message.error("删除该订单失败");
        }
      },
      //  获取主体表格数据
      async setAllList() {
     if (this.searchValue == '') {
                    this.searchData.id = this.searchValue;
                } else {
                    this.searchData.id = this.searchValue;
                }
        const { data: res } = await getAllInfoByPage(
          this.page.pageNum,
          this.page.pageSize,
          this.searchType,
        );
        
        console.log("请求到的列表", res);
        if (res.statusCode !== 20000) {
          this.$message.error("查询数据失败");
        } else {
          this.allInfo.allList = res.data.records;
          this.page.total = res.data.total;
        }
      },

      //根据批次号查看详情
      async seeDetail(e) {
        this.theBatch.farmBatch = e;
        const { data: res } = await getInfoByBatch(this.theBatch);
        console.log(res);
        if (res.statusCode === 20000) {
          this.$message.success("查询详情成功");
          this.detailDialog = true
          this.detailInfo = res.data
          console.log("kkk", this.detailInfo)
        } else {
          if (res.data == null) {
            return this.$message.error("查询详情失败");
          }
        }
      },

      //暂时的
      Detail() {

      },

      //切换显示方式
      cut() {
        let that = this;
        that.dataList = !that.dataList;
        that.pageShow = !that.pageShow;
      },


      // 改变页码
      handleCurrentChange(newSize) {
        console.log(newSize)
        this.page.pageNum = newSize;
        // 重新获取数据
        this.setAllList()

      },
      handleSizeChange(newPage) {
        console.log(newPage)
        this.page.pageSize = newPage
        this.setAllList()
      },
    },
  };
</script>

<style lang="scss" scoped>
  .search {
    background-color: #fafafa;
    width: 100%;
    height: auto;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
  }

  .el-pagination {
    text-align: center;
  }

  .page-css {
    margin-top: 1.1rem;
    text-align: center;
  }
</style>